<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>redis pub/sub</title>
</head>

<body>
  <h3>选择频道</h3>
  <div class="topic">
    <label for="sports">体育(sports):</label>
    <input type="checkbox" name="sports" id="sports" value="sports">
    <label for="car">汽车(car):</label>
    <input type="checkbox" name="car" id="car" value="car">
    <label for="news">新闻(news):</label>
    <input type="checkbox" name="events" id="events" value="events">
  </div>
  <br /> 发送 channel:
  <input type="text" id="pub" />
  <br /> 发送 message:
  <input type="text" id="pubmess" />
  <br/>
  <button class="btn-dy">订阅</button>
  <button class="btn-qxdy">取消订阅</button>
  <button id="publish">发送信息</button>

  <div>
    MESSAGE：
    <p class="hint-infor"></p>
  </div>
  <div>
    ACK：
    <p class="hint-ack"></p>
  </div>
  <h4>CONNECT:</h4>
  <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/socket.io/2.1.0/socket.io.js"></script>
  <script>
    connect();

    //当前用户添加一个channel,订阅话题
    $('.btn-dy').on('click', function () {
      var arr = [];
      var a = $('.topic input');
      for (var i = 0; i < a.length; i++) {
        if ($(a[i]).is(':checked')) {
          arr.push($(a[i]).val());
        }
      }
      socket.emit('subscribe', arr);
    });
    //取消订阅话题
    $('.btn-qxdy').on('click', function () {
      var arr = [];
      var a = $('.topic input');
      for (var i = 0; i < a.length; i++) {
        if ($(a[i]).is(':checked')) {
          arr.push($(a[i]).val());
        }
      }
      socket.emit('unsubscribe', arr);
    });


    //当前用户向某一个channel中发布消息,发送消息,指定组发
    $('#publish').on('click', function () {
      socket.emit('publish', $('#pub').val(), $('#pubmess').val());
    });
    /** 参见sock.io API文档事件(Event)说明 https://socket.io/docs/client-api  */
    function connect() {
      socket = io.connect('http://127.0.0.1:16379');
      socket.on('reconnecting', function (attemptNumber) {
        var str = '<p>socket正在与服务器建立链接</p>';
        $('body').append(str);
      });
      socket.on('connect', function () {
        var str = '<p>当socket与后端成功建立链接</p>';
        $('body').append(str);
      });
      socket.on('disconnect', function (reason) {
        var str = '<p>当与服务器断开链接:'+reason+'</p>';
        $('body').append(str);
      });
      socket.on('reconnect', function (attemptNumber) {
        var str = '<p>重新链接成功</p>';
        $('body').append(str);
      });
      socket.on('reconnect_failed', function () {
        var str = '<p>重连失败</p>';
        $('body').append(str);
      });
      // 显示频道订阅显示消息  
      socket.on('message', function (message) {
        console.log(message);
        $('.hint-infor').text(message.channel + ':' + message.data);        
      });
      //显示请求响应
      socket.on('ack', function (ack) {
        console.log(ack);
        $('.hint-ack').text(ack.request + ':' + ack.respone + ':' + ack.reply);        
      });
    }
  </script>
</body>

</html>